<template>
    <div class="footer">
        <ul class="flexbox items-center justify-center">
            <li v-for="(item,index) in navItems" :key="index" :class="{'current': index===activeIndex}">
                <router-link :to="item.url">
                    <i :class="item.icons"></i>
                    <span v-text="item.title"></span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        activeIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            navItems: [{
                "title": "首页",
                "url": "/",
                "icons": "home-icon"
            }, {
                "title": "分类",
                "url": "/classify/index",
                "icons": "type-icon"
            }, {
                "title": "购物车",
                "url": "/cart",
                "icons": "cart-icon"
            }, {
                "title": "我的",
                "url": "/index/login",
                "icons": "user-icon"
            }]
        }
    }
}
</script>